<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - AI分析功能</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* 标签页 */
        .tab {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .tab:hover {
            background: rgba(102, 126, 234, 0.05);
        }
        .tab.active {
            background: var(--primary-gradient);
            color: white;
        }

        /* 数据源卡片 */
        .datasource-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .datasource-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* 任务卡片 */
        .task-card {
            transition: all 0.3s ease;
        }
        .task-card:hover {
            background: rgba(102, 126, 234, 0.05);
        }

        /* 进度条 */
        .progress-bar {
            transition: width 0.3s ease;
        }

        /* 服务卡片 */
        .service-card {
            transition: all 0.3s ease;
        }
        .service-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* 状态指示器 */
        .status-indicator {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            }
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-dashboard text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">AI分析功能</h2>
                        <p class="text-sm text-slate-500">管理和配置AI分析功能</p>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 标签页导航 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 mb-6">
                    <div class="flex space-x-1 p-1">
                        <button class="tab active flex-1 py-3 px-4 rounded-lg font-medium" data-tab="datasource">
                            <i class="fas fa-database mr-2"></i>信访数据源
                        </button>
                        <button class="tab flex-1 py-3 px-4 rounded-lg font-medium" data-tab="analysis">
                            <i class="fas fa-brain mr-2"></i>信访分析
                        </button>
                        <button class="tab flex-1 py-3 px-4 rounded-lg font-medium" data-tab="service">
                            <i class="fas fa-cogs mr-2"></i>功能服务
                        </button>
                    </div>
                </div>

                <!-- 信访数据源 -->
                <div id="datasource" class="tab-content">
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-slate-800">数据源管理</h3>
                            <button onclick="showAddDatasourceModal()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-plus mr-2"></i>新增数据源
                            </button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <!-- 数据源卡片 -->
                            <div class="datasource-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between mb-4">
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-database text-blue-600 text-xl"></i>
                                    </div>
                                    <div class="flex space-x-2">
                                        <button class="text-slate-400 hover:text-slate-600">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-slate-400 hover:text-red-600">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <h4 class="font-semibold text-slate-800 mb-2">MySQL数据库</h4>
                                <p class="text-sm text-slate-600 mb-4">信访系统主数据库</p>
                                <div class="space-y-2 text-xs">
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">连接状态</span>
                                        <span class="text-green-600 font-medium">
                                            <i class="fas fa-circle text-xs mr-1"></i>已连接
                                        </span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">数据量</span>
                                        <span class="text-slate-700">12,345 条</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">最后更新</span>
                                        <span class="text-slate-700">5分钟前</span>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-slate-200">
                                    <button class="w-full py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-plug mr-2"></i>测试连接
                                    </button>
                                </div>
                            </div>

                            <div class="datasource-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between mb-4">
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-file-excel text-green-600 text-xl"></i>
                                    </div>
                                    <div class="flex space-x-2">
                                        <button class="text-slate-400 hover:text-slate-600">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="text-slate-400 hover:text-red-600">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <h4 class="font-semibold text-slate-800 mb-2">Excel文件</h4>
                                <p class="text-sm text-slate-600 mb-4">历史信访数据导入</p>
                                <div class="space-y-2 text-xs">
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">文件状态</span>
                                        <span class="text-green-600 font-medium">
                                            <i class="fas fa-check-circle text-xs mr-1"></i>已解析
                                        </span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">数据量</span>
                                        <span class="text-slate-700">5,678 条</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">导入时间</span>
                                        <span class="text-slate-700">2024-01-10</span>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-slate-200">
                                    <button class="w-full py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-eye mr-2"></i>查看详情
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- 信访分析 -->
                <div id="analysis" class="tab-content hidden">
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-slate-800">分析任务管理</h3>
                            <div class="flex space-x-3">
                                <button onclick="showAddAnalysisModal()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                    <i class="fas fa-plus mr-2"></i>新增分析任务
                                </button>
                                <button class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                    <i class="fas fa-sync mr-2"></i>刷新
                                </button>
                            </div>
                        </div>

                        <!-- 分析任务列表 -->
                        <div class="space-y-4">
                            <div class="task-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-3 mb-2">
                                            <h4 class="font-semibold text-slate-800">月度信访数据分析</h4>
                                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">运行中</span>
                                        </div>
                                        <p class="text-sm text-slate-600 mb-3">分析本月信访数据趋势、类型分布和区域对比</p>
                                        <div class="grid grid-cols-4 gap-4 text-sm">
                                            <div>
                                                <span class="text-slate-500">数据源</span>
                                                <p class="font-medium">MySQL数据库</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">分析类型</span>
                                                <p class="font-medium">趋势分析</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">创建时间</span>
                                                <p class="font-medium">2024-01-15 10:00</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">进度</span>
                                                <div class="mt-1">
                                                    <div class="w-full bg-slate-200 rounded-full h-2">
                                                        <div class="progress-bar bg-green-500 h-2 rounded-full" style="width: 75%"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-end space-y-2 ml-4">
                                        <div class="flex items-center space-x-2">
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="配置">
                                                <i class="fas fa-cog text-slate-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="停止">
                                                <i class="fas fa-stop text-red-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="编辑">
                                                <i class="fas fa-edit text-slate-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="删除">
                                                <i class="fas fa-trash text-red-600"></i>
                                            </button>
                                        </div>
                                        <button onclick="showTaskDetail('task1')" class="text-sm text-indigo-600 hover:text-indigo-800">
                                            <i class="fas fa-eye mr-1"></i>查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="task-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-3 mb-2">
                                            <h4 class="font-semibold text-slate-800">重点问题识别分析</h4>
                                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">已完成</span>
                                        </div>
                                        <p class="text-sm text-slate-600 mb-3">识别重复投诉和热点问题区域</p>
                                        <div class="grid grid-cols-4 gap-4 text-sm">
                                            <div>
                                                <span class="text-slate-500">数据源</span>
                                                <p class="font-medium">Excel导入</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">分析类型</span>
                                                <p class="font-medium">聚类分析</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">完成时间</span>
                                                <p class="font-medium">2024-01-14 16:30</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">结果</span>
                                                <p class="font-medium text-green-600">识别出12个热点</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-end space-y-2 ml-4">
                                        <div class="flex items-center space-x-2">
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="查看结果">
                                                <i class="fas fa-eye text-indigo-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="重新运行">
                                                <i class="fas fa-redo text-green-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="编辑">
                                                <i class="fas fa-edit text-slate-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="删除">
                                                <i class="fas fa-trash text-red-600"></i>
                                            </button>
                                        </div>
                                        <button onclick="showTaskDetail('task2')" class="text-sm text-indigo-600 hover:text-indigo-800">
                                            <i class="fas fa-eye mr-1"></i>查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="task-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center space-x-3 mb-2">
                                            <h4 class="font-semibold text-slate-800">满意度预测分析</h4>
                                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">待运行</span>
                                        </div>
                                        <p class="text-sm text-slate-600 mb-3">基于历史数据预测信访处理满意度</p>
                                        <div class="grid grid-cols-4 gap-4 text-sm">
                                            <div>
                                                <span class="text-slate-500">数据源</span>
                                                <p class="font-medium">多源数据</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">分析类型</span>
                                                <p class="font-medium">机器学习</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">计划运行</span>
                                                <p class="font-medium">2024-01-20 09:00</p>
                                            </div>
                                            <div>
                                                <span class="text-slate-500">预计时长</span>
                                                <p class="font-medium">30分钟</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-end space-y-2 ml-4">
                                        <div class="flex items-center space-x-2">
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="立即运行">
                                                <i class="fas fa-play text-green-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="配置">
                                                <i class="fas fa-cog text-slate-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="编辑">
                                                <i class="fas fa-edit text-slate-600"></i>
                                            </button>
                                            <button class="p-2 rounded-lg hover:bg-slate-100" title="删除">
                                                <i class="fas fa-trash text-red-600"></i>
                                            </button>
                                        </div>
                                        <button onclick="showTaskDetail('task3')" class="text-sm text-indigo-600 hover:text-indigo-800">
                                            <i class="fas fa-eye mr-1"></i>查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div class="flex items-center justify-between mt-6 pt-6 border-t border-slate-200">
                            <span class="text-sm text-slate-600">显示 1-3 条，共 8 条任务</span>
                            <div class="flex items-center space-x-2">
                                <button class="px-3 py-1 rounded border border-slate-300 hover:bg-slate-50 disabled:opacity-50" disabled>
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <button class="px-3 py-1 rounded bg-indigo-600 text-white">1</button>
                                <button class="px-3 py-1 rounded border border-slate-300 hover:bg-slate-50">2</button>
                                <button class="px-3 py-1 rounded border border-slate-300 hover:bg-slate-50">3</button>
                                <button class="px-3 py-1 rounded border border-slate-300 hover:bg-slate-50">
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 功能服务 -->
                <div id="service" class="tab-content hidden">
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="text-lg font-semibold text-slate-800">服务管理</h3>
                            <button onclick="showAddServiceModal()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-plus mr-2"></i>新增服务
                            </button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <!-- API接口服务 -->
                            <div class="service-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between mb-4">
                                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-api text-purple-600 text-xl"></i>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-green-500 rounded-full status-indicator"></div>
                                        <span class="text-xs text-green-600">在线</span>
                                    </div>
                                </div>
                                <h4 class="font-semibold text-slate-800 mb-2">OpenAI API</h4>
                                <p class="text-sm text-slate-600 mb-4">GPT-4 文本分析服务</p>
                                <div class="space-y-2 text-xs">
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">服务地址</span>
                                        <span class="text-slate-700">api.openai.com</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">响应时间</span>
                                        <span class="text-slate-700">1.2s</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">今日调用</span>
                                        <span class="text-slate-700">1,234 次</span>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-slate-200 flex space-x-2">
                                    <button class="flex-1 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-cog mr-1"></i>配置
                                    </button>
                                    <button class="flex-1 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-chart-line mr-1"></i>监控
                                    </button>
                                </div>
                            </div>

                            <!-- 模型接口服务 -->
                            <div class="service-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between mb-4">
                                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-brain text-blue-600 text-xl"></i>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-green-500 rounded-full status-indicator"></div>
                                        <span class="text-xs text-green-600">在线</span>
                                    </div>
                                </div>
                                <h4 class="font-semibold text-slate-800 mb-2">本地LLM模型</h4>
                                <p class="text-sm text-slate-600 mb-4">本地部署的大语言模型</p>
                                <div class="space-y-2 text-xs">
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">模型地址</span>
                                        <span class="text-slate-700">localhost:8000</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">模型版本</span>
                                        <span class="text-slate-700">v2.1.0</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">GPU使用率</span>
                                        <span class="text-slate-700">65%</span>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-slate-200 flex space-x-2">
                                    <button class="flex-1 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-cog mr-1"></i>配置
                                    </button>
                                    <button class="flex-1 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-info-circle mr-1"></i>详情
                                    </button>
                                </div>
                            </div>

                            <!-- 本地接口服务 -->
                            <div class="service-card border border-slate-200 rounded-lg p-6">
                                <div class="flex items-start justify-between mb-4">
                                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-server text-green-600 text-xl"></i>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                        <span class="text-xs text-yellow-600">维护中</span>
                                    </div>
                                </div>
                                <h4 class="font-semibold text-slate-800 mb-2">数据处理服务</h4>
                                <p class="text-sm text-slate-600 mb-4">数据清洗和预处理</p>
                                <div class="space-y-2 text-xs">
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">服务类型</span>
                                        <span class="text-slate-700">Python脚本</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">运行状态</span>
                                        <span class="text-yellow-600">维护中</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-slate-500">预计恢复</span>
                                        <span class="text-slate-700">2小时后</span>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-slate-200 flex space-x-2">
                                    <button class="flex-1 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-play mr-1"></i>启动
                                    </button>
                                    <button class="flex-1 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                        <i class="fas fa-cog mr-1"></i>配置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
            }
        });

        // 标签页切换
        const tabs = document.querySelectorAll('.tab');
        const tabContents = {
            'datasource': document.getElementById('datasource'),
            'analysis': document.getElementById('analysis'),
            'service': document.getElementById('service')
        };

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const tabName = tab.dataset.tab;
                
                // 更新标签状态
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                // 显示对应内容
                Object.keys(tabContents).forEach(key => {
                    if (key === tabName) {
                        tabContents[key].classList.remove('hidden');
                    } else {
                        tabContents[key].classList.add('hidden');
                    }
                });
            });
        });

        // 模拟进度更新
        setInterval(() => {
            const progressBars = document.querySelectorAll('.progress-bar');
            progressBars.forEach(bar => {
                const currentWidth = parseInt(bar.style.width);
                if (currentWidth < 100) {
                    bar.style.width = (currentWidth + 1) + '%';
                }
            });
        }, 1000);
    </script>

    <!-- 新增数据源模态框 -->
    <div id="addDatasourceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-slate-800">新增数据源</h3>
                    <button onclick="closeAddDatasourceModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <!-- 数据源类型选择 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-3">数据源类型</label>
                    <div class="grid grid-cols-2 gap-4">
                        <div onclick="selectDatasourceType('database')" id="dbType" class="datasource-type border-2 border-slate-200 rounded-lg p-4 cursor-pointer hover:border-indigo-500 transition-colors">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-database text-blue-600 text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-slate-800">数据库</h4>
                                    <p class="text-sm text-slate-500">MySQL、PostgreSQL等</p>
                                </div>
                            </div>
                        </div>
                        <div onclick="selectDatasourceType('excel')" id="excelType" class="datasource-type border-2 border-slate-200 rounded-lg p-4 cursor-pointer hover:border-indigo-500 transition-colors">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-excel text-green-600 text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-slate-800">Excel文件</h4>
                                    <p class="text-sm text-slate-500">.xlsx、.xls格式</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据库配置 -->
                <div id="databaseConfig" class="hidden space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">数据库类型</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>MySQL</option>
                                <option>PostgreSQL</option>
                                <option>Oracle</option>
                                <option>SQL Server</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">主机地址</label>
                            <input type="text" placeholder="localhost" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">端口</label>
                            <input type="number" placeholder="3306" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">数据库名</label>
                            <input type="text" placeholder="petition_db" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">用户名</label>
                            <input type="text" placeholder="root" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">密码</label>
                            <input type="password" placeholder="****" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>

                <!-- Excel配置 -->
                <div id="excelConfig" class="hidden space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">选择文件</label>
                        <div class="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center hover:border-indigo-500 transition-colors cursor-pointer">
                            <i class="fas fa-cloud-upload-alt text-4xl text-slate-400 mb-4"></i>
                            <p class="text-slate-600 mb-2">点击上传或拖拽文件到此处</p>
                            <p class="text-sm text-slate-500">支持 .xlsx、.xls 格式，最大 50MB</p>
                            <input type="file" class="hidden" accept=".xlsx,.xls">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">工作表名称</label>
                        <input type="text" placeholder="Sheet1" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                </div>

                <!-- 通用配置 -->
                <div class="mt-6 pt-6 border-t border-slate-200">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">数据源名称</label>
                        <input type="text" placeholder="请输入数据源名称" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-slate-200 flex justify-end space-x-3">
                <button onclick="closeAddDatasourceModal()" class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    取消
                </button>
                <button onclick="testConnection()" class="px-6 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors">
                    测试连接
                </button>
                <button onclick="saveDatasource()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    保存
                </button>
            </div>
        </div>
    </div>

    <!-- 新增分析任务模态框 -->
    <div id="addAnalysisModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-2xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-slate-800">新增分析任务</h3>
                    <button onclick="closeAddAnalysisModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-6">
                    <!-- 基本信息 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">任务名称</label>
                        <input type="text" placeholder="请输入任务名称" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <!-- 数据源选取 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">数据源选取</label>
                        <div class="space-y-2">
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">MySQL数据库</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">Excel文件</span>
                            </label>
                        </div>
                    </div>

                    <!-- 分析功能配置 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">分析功能</label>
                        <div class="grid grid-cols-2 gap-4">
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">趋势分析</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">聚类分析</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">情感分析</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">热点识别</span>
                            </label>
                        </div>
                    </div>

                    <!-- 分析类型配置 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">分析类型</label>
                        <div class="grid grid-cols-3 gap-4">
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="analysisType" value="scheduled" class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">定时分析</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="analysisType" value="realtime" class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">实时分析</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="analysisType" value="batch" class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">批量分析</span>
                            </label>
                        </div>
                    </div>

                    <!-- 定时配置 -->
                    <div id="scheduleConfig" class="hidden space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">执行周期</label>
                                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option>每日</option>
                                    <option>每周</option>
                                    <option>每月</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">执行时间</label>
                                <input type="time" value="09:00" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>

                    <!-- 时间范围配置 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs text-slate-500 mb-1">开始时间</label>
                                <input type="date" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-xs text-slate-500 mb-1">结束时间</label>
                                <input type="date" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>

                    <!-- 高级配置 -->
                    <div class="pt-4 border-t border-slate-200">
                        <div class="flex items-center justify-between mb-4">
                            <label class="text-sm font-medium text-slate-700">高级配置</label>
                            <button class="text-sm text-indigo-600 hover:text-indigo-800">
                                <i class="fas fa-chevron-down mr-1"></i>展开
                            </button>
                        </div>
                        <div class="hidden space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">并发数</label>
                                <input type="number" value="4" min="1" max="16" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">超时时间（分钟）</label>
                                <input type="number" value="30" min="1" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-slate-200 flex justify-end space-x-3">
                <button onclick="closeAddAnalysisModal()" class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    取消
                </button>
                <button onclick="saveAnalysisTask()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    创建任务
                </button>
            </div>
        </div>
    </div>

    <!-- 任务详情页面 -->
    <div id="taskDetailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-2xl max-w-6xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-slate-800">任务详情 - 月度信访数据分析</h3>
                    <button onclick="closeTaskDetailModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <!-- 任务进度 -->
                <div class="mb-8">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">任务进度</h4>
                    <div class="bg-slate-50 rounded-lg p-6">
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-sm text-slate-600">总体进度</span>
                            <span class="text-lg font-semibold text-green-600">75%</span>
                        </div>
                        <div class="w-full bg-slate-200 rounded-full h-3 mb-6">
                            <div class="bg-gradient-to-r from-indigo-500 to-purple-600 h-3 rounded-full" style="width: 75%"></div>
                        </div>
                        <div class="grid grid-cols-4 gap-4 text-sm">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-slate-800">9,234</div>
                                <div class="text-slate-500">已处理</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-slate-800">3,111</div>
                                <div class="text-slate-500">待处理</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-green-600">92%</div>
                                <div class="text-slate-500">准确率</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-slate-800">15分钟</div>
                                <div class="text-slate-500">预计剩余</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 识别结果下载 -->
                <div class="mb-8">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">识别结果</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="border border-slate-200 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h5 class="font-medium text-slate-800">分析报告</h5>
                                <i class="fas fa-file-alt text-indigo-600"></i>
                            </div>
                            <p class="text-sm text-slate-600 mb-3">包含趋势分析、热点识别等完整报告</p>
                            <button class="w-full py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-download mr-2"></i>下载PDF
                            </button>
                        </div>
                        <div class="border border-slate-200 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h5 class="font-medium text-slate-800">数据表格</h5>
                                <i class="fas fa-table text-green-600"></i>
                            </div>
                            <p class="text-sm text-slate-600 mb-3">结构化的分析结果数据</p>
                            <button class="w-full py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                <i class="fas fa-download mr-2"></i>下载Excel
                            </button>
                        </div>
                        <div class="border border-slate-200 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h5 class="font-medium text-slate-800">原始数据</h5>
                                <i class="fas fa-database text-blue-600"></i>
                            </div>
                            <p class="text-sm text-slate-600 mb-3">经过清洗的原始数据集</p>
                            <button class="w-full py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-download mr-2"></i>下载CSV
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 保存数据配置 -->
                <div class="mb-8">
                    <h4 class="text-lg font-semibold text-slate-800 mb-4">数据保存配置</h4>
                    <div class="bg-slate-50 rounded-lg p-6">
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h5 class="font-medium text-slate-800">自动保存到数据库</h5>
                                    <p class="text-sm text-slate-500">将分析结果自动保存到指定数据库</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <h5 class="font-medium text-slate-800">生成历史版本</h5>
                                    <p class="text-sm text-slate-500">保留每次运行的历史记录</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <h5 class="font-medium text-slate-800">发送邮件通知</h5>
                                    <p class="text-sm text-slate-500">任务完成时发送邮件通知</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 运行日志 -->
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <h4 class="text-lg font-semibold text-slate-800">运行日志</h4>
                        <div class="flex items-center space-x-3">
                            <button class="text-sm text-slate-500 hover:text-slate-700">
                                <i class="fas fa-sync mr-1"></i>刷新
                            </button>
                            <button class="text-sm text-slate-500 hover:text-slate-700">
                                <i class="fas fa-download mr-1"></i>下载日志
                            </button>
                        </div>
                    </div>
                    <div class="bg-slate-900 rounded-lg p-4 max-h-64 overflow-y-auto">
                        <pre class="text-sm text-green-400 font-mono"><code>[2024-01-15 10:00:01] 任务启动成功
[2024-01-15 10:00:02] 连接数据源: MySQL数据库
[2024-01-15 10:00:03] 开始数据预处理...
[2024-01-15 10:00:15] 数据预处理完成，共处理 12,345 条记录
[2024-01-15 10:00:16] 开始趋势分析...
[2024-01-15 10:02:30] 趋势分析完成
[2024-01-15 10:02:31] 开始聚类分析...
[2024-01-15 10:05:45] 聚类分析完成，识别出 8 个聚类
[2024-01-15 10:05:46] 正在生成分析报告...
[2024-01-15 10:08:20] 任务进行中 (75%)</code></pre>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-slate-200 flex justify-end">
                <button onclick="closeTaskDetailModal()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 新增服务模态框 -->
    <div id="addServiceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-xl font-semibold text-slate-800">新增服务</h3>
                    <button onclick="closeAddServiceModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="space-y-6">
                    <!-- 服务类型 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">服务类型</label>
                        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option>API接口服务</option>
                            <option>模型服务</option>
                            <option>数据处理服务</option>
                            <option>自定义服务</option>
                        </select>
                    </div>

                    <!-- 基本信息 -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">服务名称</label>
                            <input type="text" placeholder="请输入服务名称" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">服务版本</label>
                            <input type="text" placeholder="v1.0.0" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>

                    <!-- 接口配置 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">接口配置</label>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs text-slate-500 mb-1">服务地址</label>
                                <input type="url" placeholder="https://api.example.com" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-xs text-slate-500 mb-1">请求方法</label>
                                    <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <option>GET</option>
                                        <option>POST</option>
                                        <option>PUT</option>
                                        <option>DELETE</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-xs text-slate-500 mb-1">超时时间(秒)</label>
                                    <input type="number" value="30" min="1" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                                <div>
                                    <label class="block text-xs text-slate-500 mb-1">重试次数</label>
                                    <input type="number" value="3" min="0" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 认证配置 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">认证方式</label>
                        <div class="space-y-3">
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="authType" value="none" checked class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">无需认证</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="authType" value="apikey" class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">API Key</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="authType" value="bearer" class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">Bearer Token</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="radio" name="authType" value="basic" class="text-indigo-600 focus:ring-indigo-500">
                                <span class="text-slate-700">Basic Auth</span>
                            </label>
                        </div>
                    </div>

                    <!-- 高级配置 -->
                    <div class="pt-4 border-t border-slate-200">
                        <div class="flex items-center justify-between mb-4">
                            <label class="text-sm font-medium text-slate-700">高级配置</label>
                            <button type="button" onclick="toggleAdvancedConfig()" class="text-sm text-indigo-600 hover:text-indigo-800">
                                <i class="fas fa-chevron-down mr-1"></i>展开
                            </button>
                        </div>
                        <div id="advancedConfig" class="hidden space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">请求头</label>
                                <textarea rows="3" placeholder='{"Content-Type": "application/json"}' class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono text-sm"></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">健康检查路径</label>
                                <input type="text" placeholder="/health" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-slate-200 flex justify-end space-x-3">
                <button onclick="closeAddServiceModal()" class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    取消
                </button>
                <button onclick="testService()" class="px-6 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors">
                    测试连接
                </button>
                <button onclick="saveService()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    保存服务
                </button>
            </div>
        </div>
    </div>

    <script>
        // 数据源类型选择
        function selectDatasourceType(type) {
            document.querySelectorAll('.datasource-type').forEach(el => {
                el.classList.remove('border-indigo-500', 'bg-indigo-50');
            });
            
            if (type === 'database') {
                document.getElementById('dbType').classList.add('border-indigo-500', 'bg-indigo-50');
                document.getElementById('databaseConfig').classList.remove('hidden');
                document.getElementById('excelConfig').classList.add('hidden');
            } else if (type === 'excel') {
                document.getElementById('excelType').classList.add('border-indigo-500', 'bg-indigo-50');
                document.getElementById('excelConfig').classList.remove('hidden');
                document.getElementById('databaseConfig').classList.add('hidden');
            }
        }

        // 显示新增数据源模态框
        function showAddDatasourceModal() {
            document.getElementById('addDatasourceModal').classList.remove('hidden');
            document.getElementById('addDatasourceModal').classList.add('flex');
        }

        // 关闭新增数据源模态框
        function closeAddDatasourceModal() {
            document.getElementById('addDatasourceModal').classList.add('hidden');
            document.getElementById('addDatasourceModal').classList.remove('flex');
        }

        // 测试连接
        function testConnection() {
            alert('连接测试成功！');
        }

        // 保存数据源
        function saveDatasource() {
            alert('数据源保存成功！');
            closeAddDatasourceModal();
        }

        // 显示新增分析任务模态框
        function showAddAnalysisModal() {
            document.getElementById('addAnalysisModal').classList.remove('hidden');
            document.getElementById('addAnalysisModal').classList.add('flex');
        }

        // 关闭新增分析任务模态框
        function closeAddAnalysisModal() {
            document.getElementById('addAnalysisModal').classList.add('hidden');
            document.getElementById('addAnalysisModal').classList.remove('flex');
        }

        // 保存分析任务
        function saveAnalysisTask() {
            alert('分析任务创建成功！');
            closeAddAnalysisModal();
        }

        // 显示任务详情
        function showTaskDetail(taskId) {
            document.getElementById('taskDetailModal').classList.remove('hidden');
            document.getElementById('taskDetailModal').classList.add('flex');
        }

        // 关闭任务详情
        function closeTaskDetailModal() {
            document.getElementById('taskDetailModal').classList.add('hidden');
            document.getElementById('taskDetailModal').classList.remove('flex');
        }

        // 显示新增服务模态框
        function showAddServiceModal() {
            document.getElementById('addServiceModal').classList.remove('hidden');
            document.getElementById('addServiceModal').classList.add('flex');
        }

        // 关闭新增服务模态框
        function closeAddServiceModal() {
            document.getElementById('addServiceModal').classList.add('hidden');
            document.getElementById('addServiceModal').classList.remove('flex');
        }

        // 测试服务
        function testService() {
            alert('服务测试成功！');
        }

        // 保存服务
        function saveService() {
            alert('服务保存成功！');
            closeAddServiceModal();
        }

        // 切换高级配置
        function toggleAdvancedConfig() {
            const config = document.getElementById('advancedConfig');
            const button = event.currentTarget;
            
            if (config.classList.contains('hidden')) {
                config.classList.remove('hidden');
                button.innerHTML = '<i class="fas fa-chevron-up mr-1"></i>收起';
            } else {
                config.classList.add('hidden');
                button.innerHTML = '<i class="fas fa-chevron-down mr-1"></i>展开';
            }
        }

        // 监听分析类型选择
        document.querySelectorAll('input[name="analysisType"]').forEach(radio => {
            radio.addEventListener('change', (e) => {
                const scheduleConfig = document.getElementById('scheduleConfig');
                if (e.target.value === 'scheduled') {
                    scheduleConfig.classList.remove('hidden');
                } else {
                    scheduleConfig.classList.add('hidden');
                }
            });
        });

        // 点击模态框外部关闭
        document.getElementById('addDatasourceModal').addEventListener('click', (e) => {
            if (e.target.id === 'addDatasourceModal') {
                closeAddDatasourceModal();
            }
        });

        document.getElementById('addAnalysisModal').addEventListener('click', (e) => {
            if (e.target.id === 'addAnalysisModal') {
                closeAddAnalysisModal();
            }
        });

        document.getElementById('taskDetailModal').addEventListener('click', (e) => {
            if (e.target.id === 'taskDetailModal') {
                closeTaskDetailModal();
            }
        });

        document.getElementById('addServiceModal').addEventListener('click', (e) => {
            if (e.target.id === 'addServiceModal') {
                closeAddServiceModal();
            }
        });
    </script>
</body>
</html>